<template>
    <div>
        <el-col :span="24" class="toolbar" style="padding: 10px">
            <div class="d-flex a-center j-sb">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.typeName" placeholder="输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getFilterData">查询</el-button>
                        <el-button type="primary" @click="getAllData">全部</el-button>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="addClass">添加药品分类</el-button>
            </div>
        </el-col>
        <template>
            <el-table :data="dataList" ref="multipleTable" highlight-current-row style="width: 100%;" stripe border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="id" label="ID" min-width="10" align="center"></el-table-column>
                <el-table-column prop="typeName" label="分类名称" min-width="16" align="center"></el-table-column>
                <el-table-column prop="isSort" label="排序" min-width="16" align="center"></el-table-column>
                <el-table-column v-if="isdrugName" prop="drugName" :formatter="formatterColumn" label="所属" min-width="16" align="center"></el-table-column>
                <el-table-column label="操作" min-width="16" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="amendData(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" style="margin-left:2vw" @click="deleteData(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
        </template>
        <el-pagination style="float:right;padding:5px;margin-top:10px;"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="pageTotal"
            :hide-on-single-page="isHidePage">
        </el-pagination>

        <el-dialog :title="dialogVisibleTitle" :visible.sync="dialogVisible" width="30%">
            <el-form ref="formClass" :model="formData" :rules="rules" label-width="120px" style="padding-right:10vw">
                <el-form-item label="分类名称：" prop="typeName">
                    <el-input v-model="formData.typeName" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="isSort">
                    <el-input type="number" v-model="formData.isSort" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item>
                    
                </el-form-item>
            </el-form>
            <div slot="footer" class="text-center">
                <el-button style="margin-right:20px" @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleTrue">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
   
    data(){
        return{
            labelPosition: 'left',
            tabClick: 'first',
            filters: { typeName: '' },
            dataList: [],
            currentPage: 1,
            pageSize:10,
            pageTotal: 0,
            isHidePage: true,
            formData: {},
            dialogVisible: false,
            dialogVisibleTitle: '新增',
            rules: {
                typeName: [{ required: true, message: '请输入分类名称', trigger: 'blur'}],
                isSort: [{ required: true, message: '请输入数字', trigger: 'blur'}]
            },
            isdrugName:false
            // typeName: '',
            // isSort: ''
        }
    },
    methods: {
        addClass(){
            this.formData = {
                typeName: '', isSort: ''
            }
            this.dialogVisibleTitle = '添加药品';
            this.dialogVisible = true;
        },
        amendData(row){
            this.formData = row;
            // this.typeName = row.typeName;
            // this.isSort = row.isSort;
            this.dialogVisibleTitle = '编辑药品';
            this.dialogVisible = true;
        },
        getFilterData(){
            this.currentPage = 1;
            this.getMedicalType("filter");
        },
        getAllData(){
            this.currentPage = 1;
            this.filters.typeName = "";
            this.getMedicalType();
        },
        dialogVisibleTrue(){
            this.$refs['formClass'].validate((valid) =>{
                if(valid){
                    const param = {
                        typeName: this.formData.typeName,
                        isSort: this.formData.isSort
                    }
                    if(this.dialogVisibleTitle == '添加药品'){
                        this.post('/operate/addMedicalType', param, res =>{
                            this.$message.success('添加成功');
                            this.getMedicalType();
                            this.dialogVisible = false;
                        },false)
                    }else{
                        param.id = this.formData.id;
                        param.drugCode = this.formData.drugCode;
                        // if(this.typeName == this.formData.typeName && this.isSort!= this.formData.isSort){
                        //     delete param.typeName
                        // }
                        this.post('/operate/updateMedicalType', param, res =>{
                            console.log(res);
                            this.$message.success('修改成功');
                            this.getMedicalType();
                            this.dialogVisible = false;
                        },false)
                    }
                }else{
                    return false
                }
            })
        },
        formatterColumn(row, column){
            if(row.drugName){
                return row.drugName
            }else{
                return '系统'
            }
        },
        deleteData(row){
            this.$confirm('确认删除？?', '提示', {
                type: 'warning'
            }).then(() => {
                row.isValid = 2;
                this.post('/operate/updateMedicalType', row, res =>{
                    this.$message.success('删除成功');
                    this.getMedicalType();
                },false)
            }).catch((err) => {
                console.log(err)
            })
        },
        getMedicalType(str='str'){
            let para = {
                pageNum:this.currentPage,
                pageSize: this.pageSize
            }
            if(str == 'filter'){
                para.searchTypeName = this.filters.typeName;
            }else{
                para.typeName = this.filters.typeName;
            }
            this.post("/operate/getMedicalTypePage",para, res => {
               this.dataList = res.data.list;
               this.pageTotal = res.data.total;
            },false)
        },
        handleCurrentChange(num){
            this.currentPage = num
            this.getMedicalType();
        },

    },
    created(){
        if(sessionStorage.getItem('userId')==1||sessionStorage.getItem('userId')==3){
            this.isdrugName=true
        }else{
            this.isdrugName=false
        }
        this.getMedicalType();
    }
}
</script>
